<template>
	<view id="homeWorkCard">
		<uni-card title="作业" :extra="formattedEndDate" :style="cardStyle">
			<text class="uni-body">{{title}}</text>
		</uni-card>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue'
	//新增，获取当前时间的响应式数据
	const currentTime = ref(new Date());
	// 接收父组件传递的属性
	const {
		title,
		endDate,
		isSubmitted
	} = defineProps(['title', 'endDate', 'isSubmitted']);

	// // 格式化日期为 "YYYY-MM-DD"
	const formattedEndDate = computed(() => {
		if (!endDate) return '';
		const date = new Date(endDate);
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');
		return `截止时间：${year}-${month}-${day}`;
	});
	// 计算用于绑定的样式对象，根据时间比较判断作业状态，返回相应样式
	const cardStyle = computed(() => {
		const endDateObj = new Date(endDate);
		console.log(isSubmitted);
		if (currentTime.value > endDateObj) {
			if (isSubmitted) {
				return {
					backgroundColor: '#f1f1f1' // 已完成时的背景色
				};
			}
			return {
				backgroundColor: '#dddddd' // 超过时间的背景色
			};
		}
		return; // 正常情况下的背景色
	});
</script>

<style lang="scss" scoped>

</style>